<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <h1>AJAX</h1>

    <button>获取users</button>
    <ul></ul>

    <button>按钮 - 0</button>


    <script>

        let btns = document.querySelectorAll('button');
        let ulElement = document.querySelector('ul');

        // 使用 js api 来发送 http 请求
        // XMLHttpRequest 对象

        btns[0].onclick = function() {
            // 创建xml对象
            let xhr = new XMLHttpRequest();

            // 配置请求参数
            xhr.open('get', '/users', true);

            this.responseType = 'json';

            // console.log(this.responseType);
            //回调事件
            xhr.onload = function() {
                // 请求线程完成工作得到的返回数据将会被添加到xhr对象的response属性
                // console.log(this.response);

                // xhr 请求，获取，并且能够得到请求和响应过程的细节信息
                // console.log(this.getAllResponseHeaders());

                // ulElement.innerHTML = this.responseText;

                let data = JSON.parse(this.responseText);

                ulElement.innerHTML = '';

                data.forEach(d => {
                    let liElement = document.createElement('li');
                    liElement.innerHTML = d.username;
                    ulElement.appendChild(liElement);
                })
            }
            // xhr.addEventListener('load', function() {
            //
            // });

            // 发送请求
            xhr.send(); // 实际的请求不是当前js这个线程去完成

            // console.log(123);

        }

        let i = 0;
        btns[1].onclick = function() {
            console.log(i++);
            this.innerHTML = `按钮 - ${i}`;
        }

    </script>

</body>
</html>
